<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Scoped CSS Variables and JS</title>
		<link
			rel="icon"
			href="https://fav.farm/✅" />
	</head>
	<body>
		<h2>Update CSS Variables with <span class="hl">JS</span></h2>

		<div class="controls">
			<labelV for="spacing">Spacing:</labelV>
			<input
				id="spacing"
				type="range"
				name="spacing"
				min="10"
				max="200"
				value="10"
				data-sizing="px" />

			<label for="blur">Blur:</label>
			<input
				id="blur"
				type="range"
				name="blur"
				min="0"
				max="25"
				value="10"
				data-sizing="px" />

			<label for="base">Base Color</label>
			<input
				id="base"
				type="color"
				name="base"
				value="#ffc600" />
		</div>

		<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500" />

		<style>
			:root {
				--base: #ffc600;
				--spacing: 10px;
				--blur: 10px;
			}

			img {
				padding: var(--spacing);
				background: var(--base);
				filter: blur(var(--blur));
			}

			.hl {
				color: var(--base);
			}

			/*
      misc styles, nothing to do with CSS variables
    */

			body {
				text-align: center;
				background: #193549;
				color: white;
				font-family: 'helvetica neue', sans-serif;
				font-weight: 100;
				font-size: 50px;
			}

			.controls {
				margin-bottom: 50px;
			}

			input {
				width: 100px;
			}
		</style>

		<script>
			const inputs = document.querySelectorAll('.controls input');

			function handleUpdate() {
				const suffix = this.dataset.sizing || '';
				document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
			}

			inputs.forEach((input) => input.addEventListener('change', handleUpdate));
			inputs.forEach((input) => input.addEventListener('mousemove', handleUpdate));
		</script>
	</body>
</html>
